<template>
  <div class="width-100-per height-100-per bg-color-white padding-10-px" :style="{height: contentHeight + 'px !important'}">
    <div class="width-100-per padding-10-px layout-side">
      <div>
        <a-button icon="plus" @click="addHelps" v-if="userType === '2'">新增</a-button>
      </div>
      <div class="layout-side">
        <div class="layout-side">
          <span class="margin-right-5-px">标题</span>
          <a-input class="formInput margin-right-5-px" v-model="selectTitle" ></a-input>
        </div>
        <a-button-group>
          <a-button icon="search" @click="selectT">查询</a-button>
          <a-button icon="reload" @click="removeS">清空</a-button>
        </a-button-group>
      </div>
    </div>
    <a-collapse accordion>
      <a-collapse-panel  v-for="(i,index) in helpList"  :key="index">
        <template slot="header">
          <div class="layout-side">
            <span>{{i.title}}</span>
            <a-button-group v-if="userType === '2'" class="margin-right-5-px">
              <a-button icon="edit" v-show="showStu" @click.stop="showUpdate(i.id)" type="primary" ghost>修改</a-button>
              <a-popconfirm title="确定删除？"  @confirm.stop="deleteHelp(i.id)">
                <a-button icon="delete" v-show="showStu"  type="primary" ghost>删除</a-button>
              </a-popconfirm>
            </a-button-group>
          </div>
        </template>
        <div class="width-100-per layout-left-top" v-html="i.content"></div>
      </a-collapse-panel>
    </a-collapse>
    <a-modal
      :title="modalTitle"
      width="900px"
      height="600px"
      :visible="modalHelp"
      @cancel="cancelPersonnel"
      okText="确认"
      cancelText="重置">
      <template slot="footer">
        <a-button key="back" @click="handleReset">重置</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="okPersonnel(adup)">确认</a-button>
      </template>
      <div style="height: 500px;">
        <div class="layout-left-center margin-bottom-10-px">
          <span class="" style="padding-right: 10px">标题</span>
          <a-input class="formInput" v-model="helps.helpTitle"></a-input>
        </div>
        <quill-editor class="editor"
                      ref="myTextEditor"
                      v-model="helps.helpContent"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @ready="onEditorReady($event)"
                      @change="onEditorChange($event)">
        </quill-editor>
      </div>
    </a-modal>
  </div>

</template>

<script>
  import {Input, Button, Modal, Collapse, Divider,Popconfirm} from 'ant-design-vue'
  export default {
    name: "Help",
    components: {
      APopconfirm: Popconfirm,
      ADivider: Divider,
      ACollapse: Collapse,
      ACollapsePanel: Collapse.Panel,
      AInput: Input,
      AButton: Button,
      AButtonGroup: Button.Group,
      AModal: Modal
    },
    data(){
      return{
        adup:0,
        helps:{
          helpTitle:'',
          helpContent:'',
        },
        userType:'0',
        /**富文本编辑器变量*********************************/
        content: null,
        editorOption: {
          modules: {
            toolbar: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"], // 引用  代码块
              [{header: 1}, {header: 2}], // 1、2 级标题
              [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表
              [{script: "sub"}, {script: "super"}], // 上标/下标
              [{indent: "-1"}, {indent: "+1"}], // 缩进
              // [{'direction': 'rtl'}],                         // 文本方向
              [{size: ["small", false, "large", "huge"]}], // 字体大小
              [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
              [{color: []}, {background: []}], // 字体颜色、字体背景颜色
              [{font: []}], // 字体种类
              [{align: []}], // 对齐方式
              ["clean"], // 清除文本格式
              ["link", "image", "video"] // 链接、图片、视频
            ], //工具菜单栏配置
          },
          placeholder: '请添加帮助内容', //提示
          readyOnly: false, //是否只读
          theme: 'snow', //主题 snow/bubble
          syntax: true, //语法检测
        },
        /**富文本编辑器变量*********************************/
        modalTitle:'',
        loading:false,
        modalHelp:false,
        contentHeight:0,
        text:'bhhhhhhhhhhhhhhhhhhhhhh',
        showStu:true,
        helpList:[],
        helpSelectList:[],
        selectTitle:'',
        helpID:'',
      }
    },
    computed:{
      monitorClientHeight(){
        return this.$store.getters.clientHeight;
      },
      editor() {
        return this.$refs.myTextEditor.quillEditor;
      }
    },
    watch:{
      monitorClientHeight:function (old,now) {
        now === 0?this.contentHeight = old -132 : this.contentHeight = old - 132;
      }
    },
    mounted(){
      if(this.$store.getters.clientHeight !== 0){
        this.contentHeight = this.$store.getters.clientHeight - 132;
      }
      this.userType = JSON.parse(this.$store.getters.currentUser).type;
      this.allHelps();
    },
    methods: {
      //清空
      removeS(){
        this.selectTitle = "";
        this.helpList=this.helpSelectList;
      },
      //搜索
      selectT(){
        const that = this;
        if(that.selectTitle === ""){
          that.$message.error('未输入帮助标题！');
          return;
        }
        that.helpList = [];
        for(let i in that.helpSelectList){
          if(that.selectTitle === that.helpSelectList[i].title){
            that.helpList.push(that.helpSelectList[i]);
          }
        }
      },
      //初始加载
      allHelps(){
        const that = this;
        that.helpList=[];
        that.$apollo.query({
          query: require('../../graphql/help/query/findAllHelps.gql'),
          variables: {},
          fetchPolicy: 'no-cache'
        }).then(data => {
          console.log(data)
          const findAllHelps = data.data.findAllHelps;
          for(let i in findAllHelps){
            that.helpList.push({
              id:findAllHelps[i].id,
              title:findAllHelps[i].helpTitle,
              content: findAllHelps[i].helpContent
            })
          }
          that.helpSelectList = that.helpList;
        }).catch((error)=>{
          console.log(error)
        })
      },
      // 失去焦点
      onEditorBlur(editor) {},
      // 获得焦点
      onEditorFocus(editor) {},
      // 开始
      onEditorReady(editor) {},
      // 值发生变化
      onEditorChange(editor) {
        this.content = editor.text;
        console.log(editor);
      },
      //新增
      addHelps(){
        this.modalTitle = '帮助新增' ;
        this.adup = 0;
        this.modalHelp = true;
      },
      //人员弹框确认按钮
      okPersonnel(e) {
        const that = this;
        this.loading = true;
        if(that.adup === 0){
          console.log('xz')
          console.log(that.helps)
          const newHelp=[];
          newHelp.push({
            id:'333333',
            helpTitle:that.helps.helpTitle,
            helpContent:that.helps.helpContent,
          })
          that.$apollo.mutate({
            mutation:require('../../graphql/help/mutation/saveHelps.gql'),
            variables:{entity:newHelp[0]},
          }).then((data)=>{
            that.allHelps();
            that.$message.success('新增成功！');
          }).catch((error)=>{
            console.log(error)
          })
        }else {
          const newHelp = []
          newHelp.push({
            id:that.helpID,
            helpTitle:that.helps.helpTitle,
            helpContent:that.helps.helpContent,
          })
          that.$apollo.mutate({
            mutation:require('../../graphql/help/mutation/saveHelps.gql'),
            variables:{entity:newHelp[0]},
          }).then((data)=>{
            that.allHelps();
            that.$message.success('修改成功！');
          }).catch((error)=>{
            console.log(error)
          })
        }
        setTimeout(() => {
          this.modalHelp = false;
          this.loading = false;
        }, 2000);
      },
      //清空
      handleReset(){
        this.helps={
          helpTitle:'',
          helpContent:'',
        }
      },
      //人员弹框右上角X按钮
      cancelPersonnel(e) {
        this.handleReset();
        this.modalHelp = false;
      },
      //修改
      showUpdate(e){
        const that = this;
        that.modalTitle = '帮助修改';
        that.adup = 2;
        that.$apollo.query({
          query: require('../../graphql/help/query/findHelpsById.gql'),
          variables: {id:e},
          fetchPolicy: 'no-cache'
        }).then(data => {
          const findHelpsById = data.data.findHelpsById;
          that.helps={
            helpTitle:findHelpsById.helpTitle,
            helpContent:findHelpsById.helpContent,
          }
          that.helpID=findHelpsById.id;
          that.modalHelp = true;
        }).catch((error)=>{
          console.log(error)
        })
      },
      //删除
      deleteHelp(e){
        this.$apollo.mutate({
          mutation:require('../../graphql/help/mutation/deleteHelpsById.gql'),
          variables:{id:e}
        }).then((data)=>{
          this.allHelps();
          this.$message.success("删除成功！");
        }).catch((error)=>{
          console.log(error)
        })
      }

    }
  }
</script>

<style scoped>
  .editor {
    line-height: normal !important;
    height: 400px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }



</style>
